<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>UsersManage</title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/usermanage.css">
    <!-- <link rel="stylesheet" href="/css/index.css"> -->
    <script src="/lib/requirejs/require.js" data-main="/js/usermanage"></script>
</head>

<body>
    <nav class="navbar navbar-default header"></nav>
    <div class="fixleft"></div>

    <div class="right">
        <div class="alert alert-success clearfix" role="alert">
            <form class="form-inline pull-left">
                <div class="form-group findbyusername">
                    <label for="exampleInputName2">用户名: </label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="用户名">
                </div>
                <button type="submit" class="btn btn-success btn-find">
                    <img src="/images/search.png" alt="">
                    查询
                </button>
            </form>
            <button type="submit" class="btn btn-primary btn-adduesr" data-toggle="modal" data-target="#addmyModal">
                <img src="/images/tianjia.png" alt="">
                添加用户
            </button>
        </div>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>用户编码</td>
                    <td>用户名称</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody class="users-body">
                
            </tbody>


            <script type="text/html" id="user_template">
                {{each list user}}
                <tr>
                    <td class="userId">{{user.userID}}</td>
                    <td class="username">{{user.username}}</td>
                    <td class="sex">{{user.sex}}</td>
                    <td class="age">{{user.age}}</td>
                    <td class="phone">{{user.phone}}</td>
                    <td>
                        <a href="">
                            <img src="/images/read.png" alt="">
                        </a>
                        <a href="">
                            <img src="/images/xiugai.png" alt="">
                        </a>
                        <a href="">
                            <img src="/images/schu.png" alt="">
                        </a>
                    </td>
                </tr>
                {{/each}}
            </script>
            <script type="text/html" id="users_template">
                {{each list user}}
                <tr>
                    <td class="userId">{{user.userID}}</td>
                    <td class="username">{{user.username}}</td>
                    <td class="sex">{{user.sex}}</td>
                    <td class="age">{{user.age}}</td>
                    <td class="phone">{{user.phone}}</td>
                    <td>
                        <a href="">
                            <img src="/images/read.png" alt="">
                        </a>
                        <a href="">
                            <img src="/images/xiugai.png" alt="">
                        </a>
                        <a href="">
                            <img src="/images/schu.png" alt="">
                        </a>
                    </td>
                </tr>
                {{/each}}
            </script>
        </table>

    </div>

    <!-- 添加用户模态框 -->
    <div class="modal fade" id="addmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-register">
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户编码</label>
                            <input type="text" class="form-control" id="userID" name="userID" placeholder="请输入用户编码，且不能重复">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">用户名称</label>
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名称" name="username">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户密码</label>
                            <input type="password" class="form-control" id="password" placeholder="请输入用户密码" name="password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">确认密码</label>
                            <input type="text" class="form-control" id="confirmpassword" placeholder="请输入确认密码">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户性别</label>
                            <select id="sex" class="form-control" name="sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">年龄</label>
                            <input type="text" class="form-control" id="birthday" placeholder="请输入出生日期，例“1995-01-01”"
                                name="age">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户电话</label>
                            <input type="text" class="form-control" id="phonenumber" placeholder="请输入用户电话" name="phone">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">用户地址</label>
                            <input type="text" class="form-control" id="useraddress" placeholder="请输入用户地址" name="address">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-primary btn-add-user" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>